<template>
  <div class="bodybox">
    <el-dialog title="" top="5vh" v-model="isShowMap" width="50%" height="50%" :modal="false"
      :close-on-click-modal="false" @close="handleclose">
      <div class="containerbox">
        <div class="display_flex1">
          <el-input class="width_accout" v-model="form.address" placeholder="请输入">
          </el-input>
          <el-button type="text" class="icon-search" @click="handleEdit_address()">查询</el-button>
        </div>
        <div id="container" class="icon-search" style="width: 92%; height: 400px"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //高德地图
import { ref, reactive, onMounted } from "vue";
import { dictionaries } from "../assets/js/dictionaries";
var map, AMap, geolocation, geocoder;
let default_lng = "118.118333";
let default_lat = "24.470341";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    let form = reactive({
      address: "北京",
      lng: default_lng,
      lat: default_lat,
    });
    const isShowMap = ref(context.attrs.isShowMap);
    const handleclose = () => {
      isShowMap.value = false;
      context.emit("handleclose", isShowMap.value);
    };
    const handlesaveEdit = () => {
      context.emit("handlesaveEdit");
    };
    const getMap = (center) => {
      AMapLoader.reset();
      AMapLoader.load({
        key: "e6a43aa4581d0cb826ce01fb6f3c7eae", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geolocation", "AMap.Geocoder"],
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: "1.3.2", // Loca 版本，缺省 1.3.2
        },
      }).then((AMap) => {
        AMap = AMap;
        // 地址转换经纬度，注册组件
        geocoder = new AMap.Geocoder({});
        geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB",
        });
        // 绑定事件
        let lnglatXY = form.lng + "," + form.lat;
        getAddress(lnglatXY);
        AMap.event.addListener(geolocation, "click", handleEdit_address);
        map = new AMap.Map("container", {
          zoom: 14,
          center: center, //中心点坐标
          viewMode: "3D", //使用3D视图
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on("click", function (e) {
          console.log(e);
          context.emit("click", e);
        });
      });
    };
    onMounted(async () => {
      getMap([default_lng, default_lat]);
    });
    const handleEdit_address = (data) => {
      // 通过地址获取经纬度
      geocoder.getLocation(form.address, function (status, result) {
        if (status === "complete" && result.geocodes.length) {
          form.lng = result.geocodes[0].location.lng;
          form.lat = result.geocodes[0].location.lat;
          getMap([form.lng, form.lat]);
        } else {
          alert("error");
        }
      });
    };
    const getAddress = (lnglatXY) => {
      // 通过经纬度获取地址
      geocoder.getAddress(lnglatXY, function (status, result) {
        if (status === "complete" && result.info === "OK") {
          form.address = result.regeocode.formattedAddress;
        }
      });
    };
    return {
      isShowMap,
      form,
      handleclose,
      handlesaveEdit,
      handleEdit_address,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";

&:deep(.el-dialog__body) {
  padding: 20px;
}

.display_flex1 {
  margin-bottom: 20px;
}
</style>
